<template>
    <view class="page">
        <view class="post-video">
            <video class="video-item" :src="videoUrl" />
        </view>
        <view class="post-title">
            <input v-model="postTitle" type="text" class="post-title-input" placeholder="取个有趣的标题吧" @focus="entryFocus" @blur="entryBlur"/>
        </view>
        <view class="post-sort-show" v-if="postSort!=''">
            已选择分类：<text @click="this.$refs.postbottoms.chooseSort()">{{postSort}}</text>
        </view>
        <view class="post-submit-btn">
            <button type="warn">发布</button>
        </view>
        <Postbottom :fatherValue.sync="postList"></Postbottom>
    </view>
</template>

<script>
    import Postbottom from "../../components/post-bottom-nav/postbottom";
    export default {
        name: "videostickers",
        components: {Postbottom},
        data(){
            return{
                videoUrl: '',
                videoShow: true,
                postTitle:'',
                postEntry:'title',
                postSort:'',
                postList: {
                    bottomnavHeight: '0px',
                    //表情定义
                    hideEmoji:false,
                }
            }
        },
        onLoad(options){
          this.videoUrl = options.videoUrl;
        },
        onShow(){
            wx.setNavigationBarTitle({
                title: '发布视频贴'
            })
        },
        onUnload(){
            console.log("ssss")
            // wx.showModal({
            //     title: '提示',
            //     content: '这是一个模态弹窗',
            //     success (res) {
            //         if (res.confirm) {
            //             console.log('用户点击确定')
            //         } else if (res.cancel) {
            //             console.log('用户点击取消')
            //         }
            //     }
            // })
        },
        methods:{
            //输入框对焦
            entryFocus(e){
                this.postList.bottomnavHeight = e.detail.height+'px';
                this.postList.hideEmoji = false;
            },
            entryBlur(){
                this.postList.hideEmoji = false;
                this.postList.bottomnavHeight = '0px';
            },
            // //选择视频
            // chooseVideo(){
            //     uni.chooseVideo({
            //         sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
            //         camera: 'back',
            //         maxDuration:60,
            //         success: res => {
            //             this.videoUrl = res.tempFilePath;
            //         }
            //     })
            // },
        },
        watch:{
            videoUrl(newValue){
                if (newValue != null){
                    this.videoShow = false
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .page{
        .post-title{
            padding: 20rpx;
            margin: 30rpx 20rpx;
            border-top: 2rpx solid #dddddd;
            .post-title-input{
                width: 100%;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 32rpx;
                color: #7e7e7e;
            }
        }
        .post-video{
            width: 100%;
            height: calc(100vw*(9/16));
            margin-bottom: 20rpx;
            .video-item{
                width: 100%;
                height: 100%;
            }
        }
        .post-sort-show{
            padding: 20rpx;
            font-size: 24rpx;
            line-height: 40rpx;
            text{
                font-size: 24rpx;
                background: #d1d1d1;
                line-height: 30rpx;
                padding: 5rpx 10rpx;
            }
        }
        .post-submit-btn{
            width: 96%;
            margin: 100rpx auto;
        }
    }
</style>